<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>常见页面布局</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<script src="../../static/js/vue.global.prod.js"></script>
	<!-- <script src="static/js/vue.global.js"></script> -->
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../../static/js/element-plue2.js"></script>
<style>
.el-header, .el-footer {
	background-color: #b3c0d1;
	color: var(--el-text-color-primary);
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: var(--el-text-color-primary);
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #e9eef3;
	color: var(--el-text-color-primary);
	text-align: center;
	line-height: 160px;
}

body > .el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
</style>
</head>
<body>
<div id="app" class="">
	<h3>================================================== 布局容器 ==================================================</h3>
	<div class="common-layout">
		<h4>================================================== 头 + 主体 ==================================================</h4>
		<el-container>
			<el-header>Header</el-header>
			<el-main>Main</el-main>
		</el-container>
		
		<h4>================================================== 头 + 主体 + 底部 ==================================================</h4>
		<el-container>
			<el-header>Header</el-header>
			<el-main>Main</el-main>
			<el-footer>Footer</el-footer>
		</el-container>
		
		<h4>================================================== 左 + 右 ==================================================</h4>
		<el-container>
			<el-aside width="200px">Aside</el-aside>
			<el-main>Main</el-main>
		</el-container>
		
		<h4>================================================== 头 + （左 + 右） ==================================================</h4>
		<el-container>
			<el-header>Header</el-header>
			<el-container>
				<el-aside width="200px">Aside</el-aside>
				<el-main>Main</el-main>
			</el-container>
		</el-container>
		
		<h4>================================================== 头 + （左 + （主体 + 底部）） ==================================================</h4>
		<el-container>
			<el-header>Header</el-header>
			<el-container>
				<el-aside width="200px">Aside</el-aside>
				<el-container>
					<el-main>Main</el-main>
					<el-footer>Footer</el-footer>
				</el-container>
			</el-container>
		</el-container>
		
		<h4>================================================== 左 + （头 + 主体） ==================================================</h4>
		<el-container>
			<el-aside width="200px">Aside</el-aside>
			<el-container>
				<el-header>Header</el-header>
				<el-main>Main</el-main>
			</el-container>
		</el-container>
		
		<h4>================================================== 左 + （头 + 主体 + 底部） ==================================================</h4>
		<el-container>
			<el-aside width="200px">Aside</el-aside>
			<el-container>
				<el-header>Header</el-header>
				<el-main>Main</el-main>
				<el-footer>Footer</el-footer>
			</el-container>
		</el-container>
	  </div>
	<br>
	
	<br>
	<button v-on:click="fn()">点击</button>
	<!-- 如果不需要传参，可以省略括号 -->
	<button v-on:click="fn">点击2</button>
	<!-- 缩写，简写 -->
	<button @click="fn">点击3</button>
	<!-- 带参数的 -->
	<button @click="hello('8866')">点击4</button>
	<p>{{ message }}</p>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>